@import './common.less';

.full-barcode {
  .full-screen();
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
      width: 80%;
      height: auto;
    }

    .number {
      padding: 0;
      margin: 0;
      margin-top: 10/@ppr;
      font-size: 40/@ppr;
      color: #2e2e36;

      span {
        margin-right: 30/@ppr;
      }
    }
  }
}

.pay-code {
  .full-screen();
  background: #ff6755;
  .scrollable();
  .wrapper {
    background: transparent;
    margin: 76/@ppr 30/@ppr;
    border-radius: 8/@ppr;
    overflow: hidden;
    padding: 1px;
    .header {
      padding: 30/@ppr 32/@ppr;
      margin: 0;
      background: #f5f5f8;
      border-bottom: 1px dashed #ebebee;
      // .dash-bottom(black);
      font-size: 26/@ppr;
      line-height: 40/@ppr;
      word-break: break-all;
      color: #acabb1;
      text-align: center;
      align-self: stretch;
      z-index: 1;
    }
    .circle-row {
      z-index: 2;
      margin-top: -15/@ppr;
      margin-bottom: -16/@ppr;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;

      .circle {
        height: 30/@ppr;
        width: 15/@ppr;
        background: #ff6755;
        z-index: 1;

        &.left {
          border-top-right-radius: 30/@ppr;
          border-bottom-right-radius: 30/@ppr;
        }

        &.right {
          border-top-left-radius: 30/@ppr;
          border-bottom-left-radius: 30/@ppr;
        }
      }
    }
  }
  .content {
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .barcode {
      height: 156/@ppr;
      width: 606/@ppr;
      margin-top: 86/@ppr;
    }

    .show-num {
      margin-top: 22/@ppr;
      font-size: 24/@ppr;
      color: #302f37;
    }

    .qrcode {
      width: 340/@ppr;
      height: 340/@ppr;
      margin-top: 94/@ppr;
      margin-bottom: 110/@ppr;
    }
  }
}
